import { createVNode, render } from 'vue'
import ErrorTipDialog from './index.vue'

// 准备DOM容器 createVNode(h) + render 动态创建标签或者组件
const divVNode = createVNode('div', { class: 'error-tip-dialog' })
render(divVNode, document.body)
// 🔔 虚拟DOM(对象)成功写入到页面后，可通过 el 属性获取到真实DOM节点
const div = divVNode.el

const CreateInstance = ({ message, title }) => {
  // 1. 动态创建虚拟DOM  -  createVNode(h) 函数
  const comVNode = createVNode(ErrorTipDialog, { message, title })
  // 2. 渲染到body页面中 -  render 函数
  render(comVNode, div)

  const destroy = () => {
    render(null, div)
    comVNode = null
  }
  return {
    comVNode,
    destroy
  }
}

export default CreateInstance